iT邦幫忙

2021 iThome 鐵人賽

DAY 5
1
Software Development

你還在用手動測試嗎?30 天帶你學會前端自動化測試框架 - Cypress系列 第 5

自動化測試,讓你上班擁有一杯咖啡的時間 | Day 5 - 執行自動化測試腳本

  • 分享至 

  • xImage
  •  

此系列文章會同步發文到個人部落格,有興趣的讀者可以前往觀看喔。

寫完 cypress 腳本後,可以用命令列和 GUI(Graphical User Interface) 執行腳本。

方法一:使用命令列來執行腳本

  1. cd/your/project/path
  2. 在命令列上輸入指令 npm run cypress:run
  3. 用命令列執行腳本時,無法看到 chrome 畫面
    https://ithelp.ithome.com.tw/upload/images/20210917/20140883upiJMAgnU3.png

方法二:透過 GUI 來選擇要執行的腳本

  1. 在命令列上輸入命令 npm run cy:open,就可以打開 GUI
    https://ithelp.ithome.com.tw/upload/images/20210917/20140883OdGEs1aO48.png

  2. 可以一次執行一個腳本或是點選 Run all specs 執行全部腳本
    https://ithelp.ithome.com.tw/upload/images/20210917/20140883LH00105jQM.png

  3. 執行腳本後,在瀏覽器上可以看到執行結果。左邊為所有的腳本,可以看到執行結果為通過或失敗,有友善的報錯訊息,或是可以按 f12 看執行錯誤的畫面方便除錯。右邊則是腳本在瀏覽器跑的畫面。
    https://ithelp.ithome.com.tw/upload/images/20210917/20140883HrZjCuLCxj.png

  4. 在 cypress/screenshots 資料夾會有錯誤畫面的截圖,在cypress/videos 資料夾會有執行過程的影片回放。
    https://ithelp.ithome.com.tw/upload/images/20210918/20140883fnyQ8l62Wg.png
    https://ithelp.ithome.com.tw/upload/images/20210918/20140883DSvzAgqSes.png

連假快樂!那我們下一篇見啦


上一篇
自動化測試,讓你上班擁有一杯咖啡的時間 | Day 4 - 利用工具錄製腳本
下一篇
自動化測試,讓你上班擁有一杯咖啡的時間 | Day 6 - 使用 Custom Commands
系列文
你還在用手動測試嗎?30 天帶你學會前端自動化測試框架 - Cypress30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言